import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './File.css'
import { Button } from 'antd-mobile'

export default function File() {
    const navigate = useNavigate()
    const [data, setData] = useState([
        {
            name: '张三',
            sex: '男',
            age: 18,
            phone: '13888888888',
            code: '123456789012345678',
            status: true
        },
        {
            name: '李四',
            sex: '女',
            age: 20,
            phone: '13999999999',
            code: '123456789012345679',
            status: false
        }
    ])
    return (
        <div className='file'>
            <div className='file-header'>
                <h1>家庭档案</h1>
                <span onClick={() => { navigate(-1) }}>&lt;</span>
            </div>
            <div className="file-content">
                {
                    data.map((item, index) => {
                        return <div key={index} className='file-content-item'>
                            <p>{item.name} {item.sex} {item.age}岁</p>
                            <p>{item.phone} {item.code}</p>
                            <label>
                                <input
                                    type="radio"
                                    value={item.status}
                                    checked={item.status === true}
                                    onChange={() => {
                                        setData(data.map((item, index) => {
                                            if (index === index) {
                                                item.status = 'option1'
                                            }
                                            return item
                                        }))
                                    }}
                                />
                                {
                                    item.status === true ? '已设为默认' : '设为默认'
                                }
                            </label>
                            <p className='del' onClick={() => { setData(data.filter(i => i !== item)) }}>X</p>
                            <Button className='edit'>修改</Button>
                        </div>
                    })
                }
            </div>
            <div className='file-footer'>
                <Button color='primary' shape='rounded'>+ 添加档案</Button>
            </div>
        </div>
    )
}
